import React from 'react';
import { Button, Tabs, Tooltip } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
// table 组件
import TableComponent from "@c/tableData/Index";

const { TabPane } = Tabs;

class PublicDomainDetail extends React.Component {
  constructor(props){
    super(props);
    this.state = {
        // 表头
      tableConfig: {
          url: "/aliyun/domain/resolves/" + this.props.location.state.domain_name,
          checkbox: true,
          thead: [
              { title: "域名", dataIndex: "DomainName", key: "DomainName" },
              { title: "主机记录", dataIndex: "RR", key: "RR" },
              { title: "解析类型", dataIndex: "Type", key: "Type" },
              { title: "记录值", dataIndex: "Value", key: "Value" },
              { title: "TTL", dataIndex: "TTL", key: "TTL" },
              { title: "权重", dataIndex: "Weight", key: "Weight" },
              { title: "线路", dataIndex: "Line", key: "Line" },
              { title: "状态", dataIndex: "Status", key: "Status" },
              { title: "锁定", dataIndex: "Locked", key: "Locked" },
              { title: "备注", dataIndex: "Remark", key: "Remark" },
          ],
          // search
          formItem: [
            { 
              type: "Input",
              label: "记录信息", 
              name: "KeyWord", 
              placeholder: "域名关键字"
            }
          ]
      },
      tableConfig_tx: {
        url: "/tencent/domain/resolves/" + this.props.location.state.domain_name,
        checkbox: true,
        thead: [
            { 
              title: "域名", 
              render: (text, rowData) => {
                return (
                    <div>{this.props.location.state.domain_name}</div>
                )
            }
            },
            { title: "主机记录", dataIndex: "Name", key: "Name" },
            { title: "解析类型", dataIndex: "Type", key: "Type" },
            { title: "记录值", dataIndex: "Value", key: "Value" },
            { title: "TTL", dataIndex: "TTL", key: "TTL" },
            { title: "权重", dataIndex: "Weight", key: "Weight" },
            { title: "线路", dataIndex: "Line", key: "Line" },
            { title: "状态", dataIndex: "Status", key: "Status" },
            { title: "更新时间", dataIndex: "UpdatedOn", key: "UpdatedOn" },
            { title: "备注", dataIndex: "Remark", key: "Remark" },
        ],
        // search
        formItem: [
          { 
            type: "Input",
            label: "记录信息", 
            name: "KeyWord", 
            placeholder: "域名关键字"
          }
        ]
    },
      // 表的数据
      data: []
    };
  }

  componentDidMount(){
    console.log(this.props.location)
  }

  // 获取子组件实例
  getChildRef = (ref) => {
    this.tableComponent = ref; // 存储子组件
  }

  render(){
    const platform = this.props.location.state.platform;
    const { tableConfig, tableConfig_tx } = this.state;
    console.log(platform)
    return (
      <div>
        <Tooltip title="返回">
          <Button 
              icon={<ArrowLeftOutlined />} 
              onClick={() => window.history.back()}
              size='large'
              style={{ border: 'none' }}
          >    
          </Button>
        </Tooltip>
        <Tabs defaultActiveKey="1" >
            <TabPane tab='详情页' key='1' >
                {/* <TableComponent onRef={this.getChildRef} batchButton={true} config={tableConfig} ></TableComponent> */}
                { 
                  platform === 'aliyun' ? 
                  <TableComponent onRef={this.getChildRef} batchButton={true} config={tableConfig} ></TableComponent> : 
                  <TableComponent onRef={this.getChildRef} batchButton={true} config={tableConfig_tx} ></TableComponent>
                }
            </TabPane>
        </Tabs>
      </div>
    )
  }
}

export default PublicDomainDetail;